<template>
	<view class="express">
		<navBar isBack backColor="#333" title="快递公司" color="#333" background="#fff"></navBar>
		<view class="content">
			<!-- <view class="search">
				<view class="iconfont icon-search2"></view>
				<input confirm-type="search" type="text" value="" placeholder="搜索快递"/>
			</view> -->
			<!-- 常用快递 -->
			<view class="usually" v-if="usuallyList.length">
				<h3>常用快递</h3>
				<view class="list">
					<view class="item" v-for="(item,index) in usuallyList" :key="index" @click="selectExpress(item,1)">
						<image :src="item.logo" mode=""></image>
						{{item.express_name}}
					</view>
				</view>
			</view>
			<!-- 物流列表 -->
			<view class="allList">
				<u-index-list :scrollTop="scrollTop" z-index="1" :offset-top="navHeight" @select="selectFn">
					<view v-for="(item, index) in expressList" :key="index">
						<u-index-anchor :index="item.sort"/>
						<view class="list-cell" @click="selectExpress(item1,2)" v-for="(item1,index1) in item.list" :key="index1">
							<image :src="item1.logo" mode=""></image>
							{{item1.express_name}}
						</view>
					</view>
				</u-index-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				store_id:null,
				expressList:[],
				usuallyList:[],
				scrollTop:0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
					"V", "W", "X", "Y", "Z"
				],
				navHeight:184,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			this.store_id = this.$store.state.index.sid
			this.navHeight = this.$store.state.system.navBarHeight*2
			this.getExpress()
		},
		methods:{
			// 获取物流公司
			getExpress(){
				this.$api.getExpress({store_id:this.store_id}).then(res=>{
					console.log(res,'物流方式')
					if(res.code==1){
						// 所有
						let expressArr = []
						this.indexList.map(item=>{
							let obj = {
								sort:item,
								list:[]
							}
							res.data.list.map(item1=>{
								if(item==item1.sort){
									obj.list.push(item1)
								}
							})
							if(obj.list.length){
								expressArr.push(obj)
							}
						})
						console.log(expressArr,'处理后的物流数据')
						this.expressList = expressArr
						// 常用
						this.usuallyList = res.data.log_list?res.data.log_list:[]
					}
				})
			},
			
			selectFn(e){
				console.log(e,'2222')
			},
			
			selectExpress(item,type){
				console.log(item,'indexindex')
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				console.log(pages)
				let nowPage = pages[ pages.length - 1];  //当前页页面实例
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				console.log(prevPage)
				prevPage.$vm.express_id = type==1?item.express_id:item.id;
				prevPage.$vm.express_name = item.express_name;
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.express{
		padding: 0 24rpx;
		height: 100%;
		background-color: #fff;
		.content{
			.search{
				margin: 24rpx auto 0;
				position: relative;
				.icon-search2{
					position: absolute;
					top: 0rpx;
					left: 28rpx;
					font: 400 24rpx/66rpx PingFang SC;
				}
				input{
					width: 694rpx;
					height: 66rpx;
					background-color: #f5f5f5;
					border-radius: 34rpx;
					font: 400 24rpx/66rpx PingFang SC;
					color: #939393;
					padding: 0 64rpx;
				}
			}
			
			// 常用快递
			.usually{
				h3{
					font: 500 32rpx/32rpx PingFang SC;
					color: #0A0605;
					padding: 60rpx 0 24rpx 0;
				}
				.list{
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					grid-gap: .5rem;
					.item{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						width: 160rpx;
						height: 160rpx;
						border: 1rpx solid #f5f5f5;
						border-radius: 8rpx;
						padding: 16rpx 32rpx 16rpx 32rpx;
						image{
							width: 96rpx;
							height: 96rpx;
						}
						font: 400 22rpx/20rpx PingFang SC;
						color: #A0A0A0;
					}
				}
			}
			
			.allList{
				margin-top: 60rpx;
				.list-cell{
					display: flex;
					align-items: center;
					background-color: #fff;
					image{
						width: 96rpx;
						height: 96rpx;
						margin-right: 24rpx;
					}
					font: 400 26rpx/40rpx PingFang SC;
					color: #0A0605;
				}
			}
		}
	}
</style>
